<template>
	<view class="redeem">

		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<!-- 这是状态栏 -->
		</view>
		<!-- #endif -->
		<!-- <uni-nav-bar title="导航栏组件"></uni-nav-bar> -->
		<uni-nav-bar left-icon="left" title="积分兑换" backgroundColor="#6A9FFB" color="#fff" @clickLeft="clickLeft" />
		<view class="head">

		</view>
		<view class="redeemData">
			<view class="redeemData-concent">
				<view class="redeemData-concent-title">
					<view class="concent-title-left">
						我的积分余额
					</view>
					<view class="concent-title-right" @click="topointsDetails">
						明细查询
					</view>
				</view>

				<view class="redeemData-concent-number">
					{{number.oneparsePrice(IntegralInfo.balance)}}
				</view>
				<view class="horizontal">
					<view class="horizontal-item">
						<view class="horizontal-item-number">

								{{number.oneparsePrice(IntegralInfo.totalIntegral)}}
						</view>
						<view class="horizontal-item-text">
							累计获得积分
						</view>
					</view>
					<view class="horizontal-item">
						<view class="horizontal-item-number">
								{{number.oneparsePrice(IntegralInfo.useIntegral)}}
						</view>
						<view class="horizontal-item-text">
							已使用积分
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="redeemData-list">
			<view class="redeemData-list-left">
				兑换机器列表
			</view>
			<view class="redeemData-list-right" @click="toExchangerecords">
				兑换记录
			</view>
		</view>
		<view class="redeem-list">
			<view class="redeem-list-list">
				<mescroll-uni :fixed="false" @init="mescrollInit" :height="height" :down="downOption"
					@down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
					<view class="Goos-List">
						<view class="Goos-List-item" v-for="(item,index) in goods" @click="todetails(item)">
							<view class="item-img">
								<image :src="item.goodsImg" mode=""></image>
							</view>
							<view class="goodsname">{{item.goodsName}}</view>
							<view class="goodsprice"><text>{{number.oneparsePrice(item.price)}}</text><text> 积分</text>
							</view>
						</view>

					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import number from "../../../utils/number.js";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const api = require('../../../config/api');
	const util = require('../../../utils/util');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				number: number, //声明number属性并赋值为引入的number模块
				navbarText: 'Hello',
				downOption: {
					auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4,
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '暂无更多', // 没有更多数据的提示文本
					empty: {
						tip: '暂无相关数据', // 提示
					},
				},
				goods: [] ,//列表数据
				IntegralInfo:{}
			}
		},
		onLoad() {

		},
		onShow() {
			this.getintegralInfo();

		},
		methods: {
			clickLeft(){
				uni.navigateBack()
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
			},
			toExchangerecords(){
				uni.navigateTo({
					url: "/pages/indexChild/Exchangerecords/Exchangerecords"
				})
			},
			todetails(item) {
				uni.navigateTo({
					url: '/pages/indexChild/RedeGoodsDetails/RedeGoodsDetails?goodsId=' + item.id
				});
			},
			topointsDetails(){
				uni.navigateTo({
					url: "/pages/indexChild/pointsDetails/pointsDetails"
				})
			},
			async getintegralInfo() {
				let pageNum = 1; // 页码, 默认从1开始
				let pageSize = 10; // 页长, 默认每页10条
				const res = await util.request(
					api.integralInfoUrl, {
						page: pageNum,
						limit: pageSize,
					},
					'POST'
				);
				console.log(res);
				if (res.code !== 0) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})

				} else {
					this.IntegralInfo = res.data
				}
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				// this.mescroll.endErr();
				// let keyword = this.tabs[this.i].dictValue
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				const res = util.request(
					api.getIntegralGoodsListUrl, {
						page: pageNum,
						limit: pageSize,

					},
					'POST'
				).then(res => {
					// console.log(res);
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					let totalPage = res.data.pages;
					this.mescroll.endByPage(res.data.records.length, totalPage); //必传参数(当前页的数据个数, 总页数)
					// this.mescroll.endSuccess(res.data.records.length);
					//设置列表数据
					if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
					this.goods = this.goods.concat(res.data.records); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//点击空布局按钮的回调
			emptyClick() {
				uni.showToast({
					title: '点击了按钮,具体逻辑自行实现'
				})
			}

		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #6A9FFB;
	}

	.uni-navbar--border {
		border-bottom-style: none !important;
	}

	page {
		height: 100%;
		background-color: #F4F5F7;
	}

	.mescroll-upwarp {
		min-height: 0rpx !important;
	}
</style>
<style lang="scss" scoped>
	.head {
		padding: 50rpx 0 150rpx 32rpx;
		// background-image: linear-gradient(to right,#FF435A,#BA1031);
		background-color: #6A9FFB;
	}

	.redeemData {
		position: relative;
		height: 65px;

		.redeemData-concent {
			position: absolute;
			left: 10px;
			// height: 30px;
			right: 10px;
			bottom: 30rpx;
			background-color: white;
			border-radius: 8px;
			padding: 10px;
			background-color: #fff;

			.redeemData-concent-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.concent-title-left {
					font-size: 14px;
					font-weight: 600;
					color: #000;

				}

				.concent-title-right {
					font-size: 14px;
					color: #ff0000;

				}
			}

			.redeemData-concent-number {
				font-size: 25px;
				color: #ff0000;
				font-weight: 600;
				margin-top: 10px;
				text-align: center;
			}
		}
	}

	.horizontal {
		display: flex;
		margin-top: 15px;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-left: 20px;

		.horizontal-item {
			width: 49%;

			.horizontal-item-number {
				font-family: 600;
				text-align: center;
				font-size: 20px;
				color: #FE9940;
			}

			.horizontal-item-text {
				color: #000;
				margin-top: 5px;
				text-align: center;
				font-size: 15px;
			}
		}
	}

	.redeemData-list {
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.redeemData-list-left {
			font-size: 14px;
			font-weight: 600;
			color: #000;

		}

		.redeemData-list-right {
			font-size: 14px;
			color: #ff0000;

		}
	}

	.redeem {

		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	.redeem-list {
		flex: 1;
		// padding: 10px;
		width: 100%;
		overflow: hidden;
	}

	.redeem-list-list {
		margin-top: 5px;
		/* background-color: antiquewhite; */
		width: 100%;
		height: 100%;
	}

	.Goos-List {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 10px;
		margin-bottom: 10px;
	}

	.Goos-List-item {
		width: 48%;
		background-color: #fff;
		border-radius: 6px;
		margin-top: 10px;
		box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, 0.04);

		.item-img {
			width: 100%;
			height: 343rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.goodsname {
		font-size: 28rpx;
		padding: 15rpx 30rpx 0 30rpx;
	}

	.goodsprice {
		padding: 0 30rpx 10rpx 30rpx;
	}

	.goodsprice>text:first-child {
		color: #E30F06;
			font-size: 28rpx;
	}

	.goodsprice>text:last-child {
		color: #E30F06;
	
					font-size: 28rpx;
	}
</style>